<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>试题管理</title>
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;600;700;800&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="/css/bootstrap.css">
    <link rel="stylesheet" href="/vendors/iconly/bold.css">
    <link rel="stylesheet" href="/vendors/perfect-scrollbar/perfect-scrollbar.css">
    <link rel="stylesheet" href="/vendors/bootstrap-icons/bootstrap-icons.css">
    <link rel="stylesheet" href="/css/app.css">
    <link rel="stylesheet" href="/css/antd-layout.css">
    <script src="/js/common.js"></script>
    <script src="/js/vue.2.6.4.min.js"></script>
    <script src='/js/jquery.3.6.0.min.js'></script>
    <style>
        .editor—wrapper {
            border: 1px solid #ccc;
            z-index: 100; /* 按需定义 */
            height: 200px;
        }

        .toolbar-container {
            border-bottom: 1px solid #ccc;
        }

        .editor-container {
            height: 110px;
        }

        .modal-dialog-scrollable .modal-content {
            overflow-y: auto;
        }

        @media (min-width: 1200px) {
            .modal-xl {
                max-width: 1500px;
            }
        }

        /* Element UI 风格表格 */
        .element-table {
            background: #ffffff;
            border: 1px solid #ebeef5;
            border-radius: 0;
            overflow: hidden;
            margin: 0 -1.5rem;
            border-left: none;
            border-right: none;
        }

        .element-table table {
            width: 100%;
            border-collapse: collapse;
        }

        .element-table thead th {
            background: #f5f7fa;
            color: #909399;
            font-weight: 500;
            text-align: center;
            padding: 12px 10px;
            font-size: 14px;
            border-bottom: 1px solid #ebeef5;
            border-right: 1px solid #ebeef5;
        }

        .element-table thead th:last-child {
            border-right: none;
        }

        .element-table tbody td {
            padding: 12px 10px;
            border-bottom: 1px solid #ebeef5;
            border-right: 1px solid #ebeef5;
            color: #606266;
            font-size: 14px;
            text-align: center;
        }

        .element-table tbody td:last-child {
            border-right: none;
        }

        .element-table tbody tr {
            transition: background-color 0.25s ease;
        }

        .element-table tbody tr:hover {
            background: #f5f7fa;
        }

        .element-table tbody tr:nth-child(even) {
            background: #fafafa;
        }

        .element-table tbody tr:nth-child(even):hover {
            background: #f5f7fa;
        }

        .element-table tbody tr:last-child td {
            border-bottom: none;
        }

        /* Element UI 风格按钮 - 带圆角描边 */
        .el-btn-text {
            display: inline-block;
            padding: 5px 15px;
            font-size: 14px;
            border-radius: 4px;
            cursor: pointer;
            transition: all 0.3s;
            text-decoration: none;
            margin-right: 8px;
            border: 1px solid;
        }

        .el-btn-text:last-child {
            margin-right: 0;
        }

        .el-btn-text:hover {
            text-decoration: none;
        }

        /* 编辑按钮 - 主题蓝 */
        .el-btn-primary {
            color: #409eff;
            border-color: #c6e2ff;
            background: #ecf5ff;
        }

        .el-btn-primary:hover {
            color: #66b1ff;
            border-color: #409eff;
            background: #d9ecff;
        }

        /* 删除按钮 - 危险红 */
        .el-btn-danger {
            color: #f56c6c;
            border-color: #fbc4c4;
            background: #fef0f0;
        }

        .el-btn-danger:hover {
            color: #f78989;
            border-color: #f56c6c;
            background: #fde2e2;
        }

        /* 操作列 */
        .action-buttons {
            display: flex;
            align-items: center;
            justify-content: center;
        }
    </style>
</head>
<body>
<div id="app">
    <div id="nav-bar-container"></div>

    <div id="main">
        <div class="page-heading">
            <section class="section">
                <div class="row">
                    <div class="col-12 col-md-12">
                        <div class="card">
                            <div class="card-header d-flex justify-content-between align-items-center">
                                <h5 class="mb-0">试题管理</h5>
                                <a href="#" class="btn btn-primary" data-bs-toggle="modal" v-if="qry.examId > 0"
                                   data-bs-target="#inlineForm" @click="beginAdd()">
                                    <i class="bi bi-plus-lg me-1"></i>新增
                                </a>
                            </div>
                            <div class="card-body">
                                <!-- Table with outer spacing -->
                                <div class="table-responsive element-table">
                                    <table class="table">
                                        <thead>
                                        <tr>
                                            <th>序号</th>
                                            <th>ID</th>
                                            <th style="width: 600px">题目</th>
                                            <th>类型</th>
                                            <th>来源</th>
                                            <th>备注</th>
                                            <th>操作</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        <tr v-for="item in resList">
                                            <td>{{item.index}}</td>
                                            <td>{{item.id}}</td>
                                            <td>{{handleContext(item.context)}}</td>
                                            <td>{{formateQuestionType(item.questionType)}}</td>
                                            <td>{{item.questionFrom}}</td>
                                            <td>{{item.remark}}</td>
                                            <td>
                                                <div class="action-buttons">
                                                    <a href="#" class="el-btn-text el-btn-primary" data-bs-toggle="modal"
                                                       data-bs-target="#inlineForm" @click="beginEdit(item)">编辑</a>
                                                    <a href="#" class="el-btn-text el-btn-danger"
                                                       @click="delItem(item.id)">删除</a>
                                                </div>
                                            </td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </div>

                                <nav aria-label="Page navigation example">
                                    <ul class="pagination pagination-primary">
                                        <li class="page-item" @click="goBegin()">
                                            <a class="page-link">
                                                <span aria-hidden="true"><i class="bi bi-chevron-left"></i></span>
                                            </a>

                                        </li>
                                        <li :class="item == qry.current?'page-item active':'page-item'"
                                            v-for="item in pageNums" @click="changeNum(item)">
                                            <a class="page-link">
                                                {{item}}
                                            </a>
                                        </li>
                                        <li class="page-item">
                                            <a class="page-link">
                                                 <span aria-hidden="true" @click="goEnd()"><i
                                                         class="bi bi-chevron-right"></i></span>
                                            </a>

                                        </li>
                                    </ul>
                                </nav>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </div>

        <div class="modal fade text-left" id="inlineForm" tabindex="-1" role="dialog"
             aria-labelledby="myModalLabel33" aria-hidden="true">
            <div class="modal-dialog modal-xl modal-dialog-centered modal-dialog-scrollable"
                 role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title" id="myModalLabel33">编辑 </h4>
                        <button type="button" class="close" data-bs-dismiss="modal"
                                aria-label="Close">
                            <i data-feather="x"></i>
                        </button>
                    </div>
                    <orm action="#">
                        <div class="modal-body">
                            <div class="form-group">
                                <div class="row">
                                    <div class="col-2">
                                        题目:
                                    </div>
                                    <div class="col-10">
                                        <!--                                        <textarea type="text"-->
                                        <!--                                               class="form-control" v-model="bindModel.context">-->
                                        <!--                                        </textarea>-->
<!--                                        <div class="editor—wrapper">-->
<!--                                            <div id="q-toolbar-container" class="toolbar-container">-->
<!--                                                &lt;!&ndash; 工具栏 &ndash;&gt;</div>-->
<!--                                            <div id="q-editor-container" class="editor-container">&lt;!&ndash; 编辑器 &ndash;&gt;</div>-->
<!--                                        </div>-->
                                        <textarea name="a-editor" rows="5" class="form-control" v-model="bindModel.context"></textarea>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-2">
                                        选项:
                                    </div>
                                    <div class="col-10">
                                        <textarea type="text" placeholder="选项" style="height: 110px"
                                                  class="form-control" v-model="bindModel.questionOptions">
                                        </textarea>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-2">
                                        答案:
                                    </div>
                                    <div class="col-10">
                                         <textarea type="text" placeholder="答案"
                                                   class="form-control" v-model="bindModel.answer">
                                        </textarea>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-2">
                                        备注:
                                    </div>
                                    <div class="col-10">
                                       <textarea type="text" placeholder="备注"
                                                 class="form-control" v-model="bindModel.remark">
                                        </textarea>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-2">
                                        问题类型:
                                    </div>
                                    <div class="col-10">
                                        <select class="form-control" v-model="bindModel.questionType">
                                            <option value="1">单选</option>
                                            <option value="2">多选</option>
                                            <option value="3">简答</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-2">
                                        菜单ID:
                                    </div>
                                    <div class="col-10">
                                        <input type="number" placeholder="菜单ID"
                                               class="form-control" v-model="bindModel.menuId">
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-2">
                                        材料ID:
                                    </div>
                                    <div class="col-10">
                                        <input type="number" placeholder="材料ID"
                                               class="form-control" v-model="bindModel.materialsId">
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-2">
                                        分数:
                                    </div>
                                    <div class="col-10">
                                        <input type="text" placeholder="score"
                                               class="form-control" v-model="bindModel.score">
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-2">
                                        examId:
                                    </div>
                                    <div class="col-10">
                                        <input type="number" placeholder="examId"
                                               class="form-control" v-model="bindModel.examId">
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-2">
                                        解析:
                                    </div>
                                    <div class="col-10">
                                        <!--                                        <textarea type="text" placeholder="解析"-->
                                        <!--                                                   class="form-control" v-model="bindModel.analysis">-->
                                        <!--                                        </textarea>-->
<!--                                        <div class="editor—wrapper">-->
<!--                                            <div id="a-toolbar-container" class="toolbar-container">-->
<!--                                                &lt;!&ndash; 工具栏 &ndash;&gt;</div>-->
<!--                                            <div id="a-editor-container" class="editor-container">&lt;!&ndash; 编辑器 &ndash;&gt;</div>-->
<!--                                        </div>-->
                                        <textarea id="a-editor" name="a-editor"  rows="12" class="form-control" v-model="bindModel.analysis"></textarea>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-2">
                                        难度:
                                    </div>
                                    <div class="col-10">
                                        <input type="number" placeholder=""
                                               class="form-control" v-model="bindModel.hardScore">
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-2">
                                        排序值:
                                    </div>
                                    <div class="col-10">
                                        <input type="number" placeholder="sortNum"
                                               class="form-control" v-model="bindModel.sortNum">
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-2">
                                        标签:
                                    </div>
                                    <div class="col-10">
                                        <input type="text" placeholder="英文逗号分隔"
                                               class="form-control" v-model="bindModel.tagNames">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-light-secondary"
                                    data-bs-dismiss="modal">
                                <i class="bx bx-x d-block d-sm-none"></i>
                                <span class="d-none d-sm-block">关闭</span>
                            </button>
                            <button type="button" class="btn btn-primary ml-1"
                                    data-bs-dismiss="modal">
                                <i class="bx bx-check d-block d-sm-none"></i>
                                <span class="d-none d-sm-block" @click="submitItem()">提交</span>
                            </button>
                        </div>
                    </orm>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="/vendors/perfect-scrollbar/perfect-scrollbar.min.js"></script>
<script src="/js/bootstrap.bundle.min.js"></script>
<script src="/js/nav-bar.js"></script>
<script src="/js/main.js"></script>
<link href="/css/w_editor.css" rel="stylesheet"/>
<script src="/js/w_editor.js"></script>
</body>

</html>
<script type="text/javascript">
    const {createEditor, createToolbar} = window.wangEditor;

    var q_editor;
    var a_editor;


    jQuery(document).ready(function () {
        var mainVue = new Vue({
            el: `#main`,
            data: {
                userInfo: {userName: '', token: '', imageHeadUrl: ''},
                bindModel: {
                    id: 0,
                    context: '',
                    examBankId: 0,
                    answer: '',
                    questionOptions: '',
                    materialsId: 0,
                    remark: '',
                    questionType: 1,
                    menuId: 0,
                    score: 0,
                    examId: 0,
                    analysis: '',
                    hardScore: 0,
                    sortNum: 0,
                    extraInfo: '',
                    tagNames: ''
                },
                resList: [],
                qry: {
                    current: 1,
                    pageSize: 20,
                    examBankId: 0,
                    examId: 0,
                    menuId: 0
                },
                examBankId: 0,
                pageNums: [1, 2, 3]
            },
            methods: {
                'init': function () {
                    var examBankId = localStorage.getItem("examBankId");
                    if (examBankId) {
                        this.qry.examBankId = examBankId;
                        this.examBankId = examBankId;
                    }
                    var thisVue = this;
                    var localUserInfo = localStorage.getItem("userInfo");
                    if (localUserInfo) {
                        thisVue.$set(thisVue, 'userInfo', JSON.parse(localUserInfo));
                    }
                    thisVue.qry.examId = getQueryString("examId");
                    thisVue.qry.menuId = getQueryString("menuId");
                    this.bindModel.examId = this.qry.examId;
                    this.getResList();
                },
                'beginAdd': function () {
                    this.bindModel = {
                        id: 0,
                        context: '',
                        examBankId: 0,
                        answer: '',
                        questionOptions: '<option></option>\r\n' +
                            '<option></option>\r\n' +
                            '<option></option>\r\n' +
                            '<option></option>',
                        materialsId: 0,
                        remark: '',
                        questionType: 1,
                        menuId: 0,
                        score: 1,
                        examId: this.qry.examId,
                        analysis: '',
                        hardScore: 4.0,
                        sortNum: 0,
                        extraInfo: '',
                        tagNames: ''
                    }
                    this.bindModel.examId = this.qry.examId;
                    q_editor.setHtml('');
                    a_editor.setHtml('');
                },
                'beginEdit': function (item) {
                    this.bindModel = item;
                    q_editor.setHtml(item.context);
                    a_editor.setHtml(item.analysis);
                },
                'delItem': function (id) {
                    var thisVue = this;
                    if (confirm("确定删除吗？")) {
                        $.ajax({
                            type: 'post',
                            contentType: "application/json",
                            dataType: "json",
                            url: '/question/deleteQuestion',
                            data: JSON.stringify({id: id}),
                            beforeSend: function (xhr) {
                                xhr.setRequestHeader("X-EM-Token", thisVue.userInfo.token);
                            },
                            cache: false
                        }).done(function (data) {
                            if (data.success) {
                                thisVue.getResList()
                            } else {
                                alert(data.errMessage);
                                if (data.timeOut) {
                                    window.location.href = "/view/userLogin";
                                }
                            }
                        });
                    }
                },
                'submitItem': function () {
                    var thisVue = this;
                    thisVue.bindModel.examBankId = thisVue.examBankId;
                    // thisVue.bindModel.context = q_editor.getHtml();
                    // thisVue.bindModel.analysis = a_editor.getHtml();

                    var url = '/question/addQuestion';
                    if (thisVue.bindModel.id > 0) {
                        url = '/question/updateQuestion';
                    }
                    $.ajax({
                        type: 'post',
                        contentType: "application/json",
                        dataType: "json",
                        url: url,
                        data: JSON.stringify(thisVue.bindModel),
                        beforeSend: function (xhr) {
                            xhr.setRequestHeader("X-EM-Token", thisVue.userInfo.token);
                        },
                        cache: false
                    }).done(function (data) {
                        if (data.success) {
                            thisVue.getResList();
                        } else {
                            alert(data.errMessage);
                            if (data.timeOut) {
                                window.location.href = "/view/userLogin";
                            }
                        }
                    });
                },
                'getResList': function () {
                    var thisVue = this;
                    $.ajax({
                        type: 'post',
                        contentType: "application/json",
                        dataType: "json",
                        url: '/question/getQuestionList',
                        data: JSON.stringify(thisVue.qry),
                        beforeSend: function (xhr) {
                            xhr.setRequestHeader("X-EM-Token", thisVue.userInfo.token);
                        },
                        cache: false
                    }).done(function (data) {
                        if (data.success) {
                            thisVue.resList = data.data;
                            thisVue.qry.pageEnd = Math.ceil(data.total / thisVue.qry.pageSize);
                            thisVue.qry.total = data.total;
                            var indexBegin = (thisVue.qry.current - 1) * thisVue.qry.pageSize + 1;
                            for (var i = 0; i < thisVue.resList.length; i++) {
                                thisVue.resList[i].index = indexBegin + i;
                            }
                            thisVue.rebuildPage();
                        } else {
                            alert(data.errMessage);
                            if (data.timeOut) {
                                window.location.href = "/view/userLogin";
                            }
                        }
                    });
                },
                'rebuildPage': function () {
                    var pageNums = [];
                    var begin = this.qry.current - 3;
                    var end = this.qry.current + 3;
                    if (begin < 1) {
                        begin = 1;
                    }
                    if (end > this.qry.pageEnd) {
                        end = this.qry.pageEnd;
                    }
                    for (var i = begin; i <= end; i++) {
                        pageNums.push(i);
                    }
                    this.pageNums = pageNums;
                },
                'changeNum': function (item) {
                    this.qry.current = item;
                    this.getResList();
                },
                'goBegin': function () {
                    this.qry.current = this.qry.pageBegin;
                    this.getResList();
                },
                'goEnd': function () {
                    this.qry.current = this.qry.pageEnd;
                    this.getResList();
                },
                'formatDate': function (input) {
                    return formatDateFull(input);
                },
                'formateQuestionType': function (input) {
                    return formateQuestionType(input);
                },
                'handleContext': function (item) {
                    if (item == null) {
                        return "";
                    }
                    if (item.length > 100) {
                        return item.substring(0, 100) + "...";
                    }
                    return item;
                }
            }
        });
        mainVue.init();

        const editorConfig = {
            MENU_CONF: {
                uploadImage: {
                    server: '/common/editorUploadImg',
                    fieldName: 'file',
                    headers: {
                        'x-em-token': mainVue.userInfo.token
                    },
                    timeout: 1000 * 1000,
                    maxFileSize: 1024 * 500,// 最大500K
                    onError: function (t, e, n) {
                        alert("'" + t.name + "' upload error :" + e.message);
                    }
                }
            }
        }
        const toolbarConfig = {
            excludeKeys: ['emotion', 'insertVideo']
        };

        // q_editor = createEditor({
        //     selector: '#q-editor-container',
        //     html: '<p><br></p>',
        //     config: editorConfig,
        //     mode: 'default', // or 'simple'
        // })

        const q_toolbar = createToolbar({
            editor: q_editor,
            selector: '#q-toolbar-container',
            config: toolbarConfig,
            mode: 'simple', // or 'simple'
        })

        // a_editor = createEditor({
        //     selector: '#a-editor-container',
        //     html: '<p><br></p>',
        //     config: editorConfig,
        //     mode: 'default', // or 'simple'
        // })

        const a_toolbar = createToolbar({
            editor: a_editor,
            selector: '#a-toolbar-container',
            config: toolbarConfig,
            mode: 'simple', // or 'simple'
        })
    });
</script>
